<template>

	<view class="u-wrap">
		<u-loading-page :loading="loadstatus"></u-loading-page>
		<view class="content">
			<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
			<view class="wrapper">
				<view v-for="(item,index) in catemenu" :key="index" class="menu" :id="`menu-${item.id}`" :class="{'current': item.id == currentCateId}"
				  @tap="handleMenuTap(item.id)">
					<text class="u-line-1">{{ item.categoryname }}</text>
				</view>
			</view>
			</scroll-view>
			<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll">
				<view class="u-padding-20">
					<!-- category begin -->
					<view class="category" v-for="(item, index) in catemenu" :key="index" :id="`cate-${item.id}`">
						<u-divider :text="item.categoryname" textPosition="right"></u-divider>
						<u-grid :border="true" col="2">
							<u-grid-item  v-for="(cate, key) in item.list" :key="key" @click="$Router.push({path: '/pages/componentsA/durg/taglist', query: {tagtypeid: item.id,name:cate.tagname,playad:''}})">
								<text class="grid-text">{{cate.tagname}}</text>
							</u-grid-item>
						</u-grid>
					
		
					<view class="" v-if="flow_list.length > 0 && item.id==3">
						<u-grid :border="true" col="2">
							<u-grid-item  v-for="(gx, gxkey) in flow_list" :key="gxkey" @click="$Router.push({path: '/pages/componentsA/durg/taginfo', query: {tagtypeid: '',name:gx.tagname,playad:''}})">
								<text class="grid-text">{{gx.tagname}}</text>
							</u-grid-item>
						</u-grid>
						<view v-if="flow_list.length > 0">
						  <u-loadmore :status="loadStatus" @loadmore="getflowlist"></u-loadmore>
						</view>
					</view>
					
					</view>
					
					
					<u-gap height="10"></u-gap>
					<!-- category end -->
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>
<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
	export default {
		data() {
			return {
				catemenu:[],
				flow_list:[],
				page:1,
				loadstatus:false,
				loadStatus:'loadmore',
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				cateScrollTop: 0,
				menuScrollIntoView: '',
				arr: [],
				currentCateId:4,
				sizeCalcState: false,
				title:'',
			}
		},
	  onReachBottom() {
		if (this.loadStatus=="loadmore"){
			setTimeout(() => {
			  if (this.loadStatus=='loadmore')this.getflowlist();
			}, 50);
		}
	  },
	  async onLoad(options) {
			this.catemenu =await this.getCategory();
			setTimeout(() => {this.getflowlist();}, 50);
	},
	
	computed: {
		...mapState(["user"]),
	},
		onReady() {
			this.getMenuItemTop()
		},
	methods: {
		getCategory(){
			return new Promise((resolve , reject)=>{
				this.loadstatus = true;
					this.$api('dcd.category',{}).then(res => {
							console.log('getTags',res)
							if (res.code==200){
								this.loadstatus = false;
								resolve(res.data)
							}
					}).catch(e => {})
			})
		},
    getflowlist() {
      return new Promise((resolve, reject) => {
        this.loadstatus = true;
        this.$api("dcd.category", {
          page: this.page,
          appointID: 3
        }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              if (res.data.total > 0) {
                let list = res.data.data;
                if (this.page <= res.data.last_page) {
                  for (let i = 0; i < list.length; i++) {
                    this.flow_list.push(list[i]);
                  }
                  if (this.page == res.data.last_page) {
                    this.loadStatus = "nomore";
                  }
                  this.page += 1;
                } else {
                  this.loadStatus = "nomore";
                }
              } else {
                this.flow_list = [];
                this.loadStatus = "nomore";
              }
            }
			this.loadstatus = false;
          }).catch((e) => {this.loadstatus = false;resolve(false);});
      });
    },

			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if(!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return ;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(rect.top - rects[0].top);
							resolve();
						})
					}).exec()
				})
			},
		handleMenuTap(id) {	//点击菜单项事件
			if(!this.sizeCalcState) {
				this.calcSize()
			}
			this.currentCateId = id
			this.$nextTick(() => this.cateScrollTop = this.catemenu.find(item => item.id == id).top)
		},
		handleGoodsScroll({detail}) {	//商品列表滚动事件
			if(!this.sizeCalcState) {
				this.calcSize()
			}
			const {scrollTop} = detail
			let tabs = this.catemenu.filter(item=> item.top <= scrollTop).reverse()
			if(tabs.length > 0){
				this.currentCateId = tabs[0].id
			}
		},
		calcSize() {
			let h = 10
			this.catemenu.forEach(item => {
				let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
				view.fields({
					size: true
				}, data => {
					item.top = h
					h += data.height
					item.bottom = h
				}).exec()
			})
			this.sizeCalcState = true
		},



			
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh );
		/* #ifdef H5 */
		height: calc(100vh);
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}
	.class-item:last-child {
		min-height: 100vh;
	}

/* 背景颜色 */
$bg-color: #F1F8FA;
$bg-color-grey: #F5F5F5;
/* 文字尺寸 */
$font-size-sm:24rpx;
$font-size-base:32rpx;
$font-size-lg:36rpx;
.grid-text{
	margin: 10px auto;
}
.content {
	flex: 1;
	overflow: hidden;
	width: 100%;
	display: flex;
	.menus {
		width: 166rpx;
		height: 100%;
		overflow: hidden;
		background-color: $bg-color-grey;
		.wrapper {
			width: 100%;
			height: 100%;
			.menu {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-weight: 400;
				padding: 30rpx 4rpx;
				color: $u-main-color;
				position: relative;
				&:nth-last-child(1) {
					margin-bottom: 130rpx;
				}
				&.current {
					background-color: #ffffff;
					color: $u-content-color;
				}
				.dot {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 22rpx;
					background-color: $u-maintheme-color;
					color: #ffffff;
					top: 16rpx;
					right: 10rpx;
					border-radius: 100%;
					text-align: center;
				}
			}
		}
	}
}
</style>
